<template>
  <a-modal v-model:open="visible" title="编辑价格配置" destroyOnClose @ok="handleOk">
    <a-form ref="addFormRef" :model="addFormState" layout="vertical">
      <a-form-item label="能源类型" name="energyTypes">
        <a-select v-model="addFormState.energyTypes" allowClear placeholder="请选择" :options="options"></a-select>
      </a-form-item>
      <a-form-item label="日期" name="date">
        <a-date-picker style="width: 100%" v-model="addFormState.date" />
      </a-form-item>
      <a-form-item label="时间段" name="time"> <a-checkbox-group v-model:value="addFormState.date" :options="checkGroupOptions" /> </a-form-item>
      <a-form-item label="价格类型" name="priceTypes">
        <a-select v-model="addFormState.priceTypes" allowClear placeholder="请选择" :options="options"></a-select>
      </a-form-item>
      <a-form-item label="价格" name="price">
        <a-input v-model="addFormState.price" placeholder="请输入" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
  import { reactive, ref } from 'vue';
  defineExpose({
    showModal,
  });
  const emits = defineEmits(['refresh']);
  const defaultAddForm = {
    energyTypes: undefined,
    date: undefined,
    time: undefined,
    priceTypes: undefined,
    price: undefined,
  };

  let addFormState = reactive({
    ...defaultAddForm,
  });

  const visible = ref(false);
  function showModal(data) {
    visible.value = true;
  }
  const formRef = ref();

  const options = reactive([
    {
      value: 'a1',
      label: 'a1',
    },
    {
      value: 'a2',
      label: 'a2',
    },
  ]);

  const checkGroupOptions = ref(['尖峰', '平时', '谷']);

  function handleOk() {
    visible.value = false;
  }
</script>
